<script setup>
const props = defineProps(['title'])
// defineEmits() 宏不能在子函数中使用。如上所示，它必须直接放置在 <script setup> 的顶级作用域下。
const emit = defineEmits(['enlarge-text'])

function buttonClick() {
  emit('enlarge-text')
}
</script>

<template>
    <h4>{{ title }}</h4>
    <!-- 
    在 <template> 中使用的 $emit 方法不能在组件的 <script setup> 部分中使用，但 defineEmits() 会返回一个相同作用的函数供我们使用 
    -->
    <button @click="$emit('enlarge-text')">Enlarge text</button>
    <button @click="buttonClick()">Enlarge text</button>
</template>